<template>
	<div class="hello">
		
 <div class="moblibottom">
 	<input type="text" name="" v-model="modetext" @change="modebottom()" placeholder="搜索" id="" value="" />
 </div>

		<van-index-bar :index-list="indexList">
		
		  <div>
		  	<van-cell v-for="item,index in datalist" @click="black(item)">
			  <template slot="title">
			  	<!--<img style="width: 1.25rem;
		height: 1.25rem;
		padding-right:0.625rem;
		float: left;" :src="item.logoUrl"/>-->
		         
			    <span v-if="data=='2'" class="custom-title">{{item.AreaEnName}}&nbsp;&nbsp;+{{item.AreaCode}}</span>
			    <span v-else class="custom-title">{{item.AreaName}}&nbsp;&nbsp;+{{item.AreaCode}}</span>
			    <van-tag type="danger" class='Mobli'><img v-if='id==item.AreaCode && cn==item.AreaName' style='width: 1rem!important;
		height: 0.75rem!important;
		padding-left: 0rem!important;' src="../images/duiha@2x.png"/></van-tag>
			  </template>
		</van-cell>
			
		  	
		  </div>

		</van-index-bar>
		


	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	import {
		AddressEdit,
		Button
	} from 'vant';
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		data() {
			return {
				value:'',
				 indexList: [],
				 datalist:'',
				 id:'',
				 modetext:'',
				 cn:'',
				 data:'222'
			}
		},
		mounted(){
		    this.data=this.$t("message.global.view")
			this.id=this.$route.params.id.split('=')[1]
			this.cn=this.$route.params.cn.split('=')[1]
			
			this.init()
		},
	
		methods: {
			init(){
				this.$get('pin_code/country_area')
				.then((response) => {
					this.datalist=response
				})
				.catch((arr)=>{
					
				})
			},
			modebottom(){
				
			},
			onSearch(){
				alert('1')
			},
			black(e){	
				var json={
					'cn':e.AreaName,
					'code':e.AreaCode,
				}
				
				this.$store.dispatch('hideFooter',json)
			    this.$router.go(-1)
			},
		    onClickLeft() {
		      console.log('返回');
			  this.$router.go(-1)
		    },
		    onClickRight() {
		      console.log('按钮');
		    }
		 },
		 watch:{
		 	'modetext':function(a,b){
				var data=[]				
		 		this.datalist.filter(function(v,i){
					if((v.AreaName).indexOf(a)!='-1'){						
						data.push(v)
					}
				});
				if(a==''){
					this.init()
				}
				this.datalist=data
		 	}
		 }
	}
</script>


<style scoped>
	.moblibottom{
		height: 2.8125rem;
		background: #fff;
		line-height: 2.8125rem;
		text-align: center;
	}
	.moblibottom input{
		height: 2.0125rem;
		border: 0.06125rem solid #f5f5f5;
		line-height: 2rem;
		border-radius:1.5625rem 1.5625rem ;
		width: 70%;
		font-size: 0.8375rem;
		padding-left: 0.625rem;
		margin: 0 auto;
	}
	.moblibottom span{
		font-size: 0.8375rem;
		line-height: 0.9375rem;
		padding-left: 0.3125rem;
	}
	.winput{
		float: left;
	}
	.van-index-bar{
		overflow: overlay;
    height: 100%;
	}
	.van-cell{
	/*background: none;*/
	
		
	}
	.van-index-bar{
		margin-top: 0.625rem;
	}
	.van-index-anchor{
		color: #acacac!important;
		
	}
	.van-cell__value{
		
	}
	.van-field__control{
		display: inline-block!important;
		height:2.5rem!important;
		
	}
	.wcenter{
		width: 18.875rem;
		border-bottom: 1px solid #acacac;
		height: 2.5rem;
		margin: 1.3125rem auto 0rem auto;
	
		/* padding-top: 1.3125rem; */
		
	}
	.Mobli{
		float: right;
	}
	.wtype{
		width: 6.25rem;
		display: inline-block;
		height:1.8rem;
		line-height: 1.9rem;
		border-right:1px solid #acacac;
		float: left;
	}
	.wtype1{
		
		display: inline-block;
		height:1.8rem;
		line-height: 1.9rem;
	
		float: left;
	}
	.van-cell__title img:nth-of-type(1){
		
	}
	.Mobli img{
		
	}
	.van-icon, .van-icon::before{
		color: #acacac;
	}
	.van-nav-bar{
		background: #2a2725!important;
	}
	[class*=van-hairline]::after{
		border: none!important;
	}
	.van-icon-arrow-left:before{
		color: #fff!important;
		    font-size:1.2rem!important;
	}
	.wfont{
		width: 21.4375rem;
		height: 15.4375rem;
		background: #fff;
		margin: 0 auto;
		border-radius:20px ;
	}
	.logo {
		width: 7.0625rem;
		height: 3.625rem;
		margin: 3.28125rem auto 0px auto;
	}
	.van-nav-bar__title{
		color: #fff!important;
		font-size: 1rem;
		}
	.helloh2 {
		font-size: 0.875rem;
		text-align: center;
		color: #fff;
		margin-top: 1.34375rem;
		margin-bottom: 3.6875rem;
	}

	.hello {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		background-color: #f5f5f5;

	}
	.vancl.van-cell__value span{
		color: #FF6147;
	}
	.van-tag--danger{
		background: none;
	}
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
